<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 去掉本服务器的头信息 -->
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2459505_w0xp91g1dos.css" />
    <link rel="stylesheet" href="../css/shoppingCar.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/api_2.js"></script>
</head>

<body>
    <div class="header">
        <ul class="header_left">
            <li><span class="iconfont icon-xingxing"></span><a href="javascript:;" class="Collection">收藏鲜花网(hua.com)</a>
            </li>
            <li><span class="iconfont icon-weixin"></span><a href="">关注微信</a></li>
            <li><span class="iconfont icon-shoujichongzhi"></span><a href="https://www.hua.com/mobile/">花礼网app</a></li>
        </ul>
        <ul class="header_right">
            <li class="tips">
                <a href="./login.html">你好,请登录</a>
                <a href="./register.html">注册</a>
            </li>
            <li>|</li>
            <li><a href="https://www.hua.com/help/ordercx/">订单查询</a></li>
            <li>|</li>
            <li><a href="./login.html">我的花礼</a></li>
            <li>|</li>
            <li class="customer_service">
                <a href="https://www.hua.com/help/">客户服务</a>
                <div class="dropdown-menu dropdown-service">
                    <a href="https://www.hua.com/member/payment/balancefill" target="_blank">在线付款</a>
                    <a href="https://www.hua.com/help/" target="_blank">帮助中心</a>
                    <a href="https://www.hua.com/help/afterservice.htm" target="_blank">售后服务</a>
                    <a href="https://www.hua.com/help/sendRange.htm" target="_blank">配送范围</a>
                    <a href="https://www.hua.com/chat/" target="_blank">留言反馈</a>
                </div>
            </li>
            <li>|</li>
            <li class="shopping_cart">
                <a href=""><span class="iconfont icon-qicheqianlian-"></span>购物车</a>
                <div class="dropdown-menu dropdown-cart" id="CartInfo">
                    <div class="empty">您的购物车中没有商品，<a href="/">先去选购吧</a>！</div>
                </div>
            </li>
            <li>|</li>
            <li><a href="">中国领先鲜花速递服务</a></li>
        </ul>
    </div>
    <div class="header_search">
        <div class="logo">
            <img src="../images/logo.png" alt="">
        </div>
        <div class="service">
            <span class="iconfont icon-dianhua">400-889-8188</span>
            <span style="color: gray;">|</span>
            <a id="header-chat" href="javascript:void(0);"><span class="iconfont icon-erji"></span>在线客服</a>
        </div>
    </div>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="" alt="" /><span></span></td>
                    <td class="price"></td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal"></td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">
            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src=""><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
<div class="cart-server">
        <div class="toper-server">
            <ul>
                <li>
                    <span class="ico ico-server-o1"></span>
                    <h4>鲜花电商龙头</h4>
                    <p>销量领先，权威认证龙头企业</p>
                </li>
                <li>
                    <span class="ico ico-server-o2"></span>
                    <h4>15年品牌 真实口碑</h4>
                    <a href="/productpj/"><p>最近评价<font id="pjCount">424196</font>条</p></a>
                </li>
                <li>
                    <span class="ico ico-server-o3"></span>
                    <h4>鲜花送前实拍展示</h4>
                    <p>展现送前实拍的鲜花网</p>
                </li>
                <li>
                    <span class="ico ico-server-o4"></span>
                    <h4>3小时送达</h4>
                    <p>全国连锁，3小时送2000城市</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer-nav">
        <a href="/">首页</a> <b>|</b> <a href="/profile/about.htm" target="_blank">关于我们</a> <b>|</b> <a href="/profile/media.html" target="_blank">媒体报道</a> <b>|</b> <a href="/profile/contact.htm" target="_blank">联系方式</a> <b>|</b> <a href="/qiyetuangou/" target="_blank">企业团购</a> <b>|</b> <a href="/liansuo/" target="_blank">花店入驻</a> <b>|</b> <a href="/member/payment/balancefill" target="_blank">在线补款</a> <b>|</b> <a class="last-child" href="/profile/why_choose_us.htm" target="_blank">为什么选择鲜花礼品网</a>
    </div>
    <footer>
        <div class="auth">
            <!-- <span style="margin-right:8px;">
                <script src="http://kxlogo.knet.cn/seallogo.dll?sn=e15041744030058395oqbo000000&amp;size=4"></script>
            </span> -->

            <a href="https://search.szfw.org/cert/l/CX20130306002238002312" target="_blank"><img
                    src="//img02.hua.com/pc/assets/img/cxwz.gif" height="40" width="112"></a>
            <a href="http://www.anquan.org/authenticate/cert/?site=www.hua.com&amp;at=realname" rel="nofollow"
                target="_blank"><img src="//img02.hua.com/pc/assets/img/smyz.gif" height="40" width="106"></a>
            <img src="//img02.hua.com/pc/assets/img/slogan.png" height="50" width="212">
            <a href="/member/payment/fillbyalipay?order_no=&amp;total_fee=" rel="nofollow" target="_blank"><img
                    src="//img02.hua.com/pc/assets/img/zfb.gif" height="49" width="96"></a>
            <a href="/profile/news_20111110.htm" target="_blank"><img src="//img02.hua.com/pc/assets/img/100.jpg"
                    height="49" width="150"></a>
        </div>
        <p><a href="/profile/ChinaFlowerAssociation.htm" rel="nofollow" target="_blank" title="中国花卉协会会员">中国花卉协会会员</a> <a
                href="/profile/chinaECA.htm" rel="nofollow" target="_blank">中国电子商务协会会员</a> ICP经营许可证：<a>粤B2-20050744</a>
            <b>|</b> <a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备09171662号</a> Copyright ©
            2005-2019</p>
        <p>鲜花礼品网 <a href="/">www.hua.com</a> 中国领先的鲜花网品牌，鲜花速递专家！</p>
    </footer>
</body>
<script>
    $(function () {
        if (getCookie("lgc")) {
            $(".tips").html("欢迎您," + getCookie("lgc") + "<button onclick='exit()'>退出</button>");
        }

       var user = getCookie("lgc");
        if (user) {
            // $(".box").html(`欢迎您,${user} <button onclick="exit()">退出</button>`);

            (async function () {
                let result = await searchShoppingByUser({ user });
                console.log(result);
                let { status, list } = result;
                if (status) {
                    var html = "";
                    list.forEach(({ id, goodsId, goodsName, goodsPrice, goodsImg, buyNum }) => {
                        html += `<tr data-id="${id}">
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span>
                    </td>
                    <td class="price">${goodsPrice}</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(buyNum * goodsPrice).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
                    })

                    $("tbody").html(html);
					
					console.log($(".count-input"))
					
					var countInpList = Array.from($(".count-input"));
					
					console.log(countInpList)
					
					for(var i = 0;i<countInpList.length;i++){
						//console.log(countInpList[i])
						//console.log(countInpList[i].value);
						var inpVal = countInpList[i].value*1;
						console.log(inpVal)
						console.log(countInpList[i])
						console.log(countInpList[i].previousSibling.previousSibling)
						if(inpVal>1){
							countInpList[i].previousSibling.previousSibling.innerHTML = "-";
						}else{
							countInpList[i].previousSibling.previousSibling.innerHTML ="";
						}
					}
						
					
					
					
					
			}


            })()

        } else {
            location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
        }

        // on 事件委托绑定事件
        // $(parent).on(eventType,target,callback)
        // parent    被委托的父代元素
        // eventType 委托绑定事件类型
        // target    委托事件的元素
        // callback  事件触发时执行的回调函数

        $(document).on("click", ".check-all", function () {
            var status = this.checked;
            console.log(status);
            $(".check-one").prop("checked", status);
            isAllChecked();
            getTotal();
        })

        $(document).on("click", ".check-one", function () {
            isAllChecked();
            getTotal();
        })


        $(document).on("click", ".add",async function () {
            // this -> 执行委托事件的元素(事件源)
            var val = $(this).prev().val();
            // console.log($(this).prev().val());
            val++;
            $(this).prev().val(val);
            var price = $(this).parent("td").prev("td").text();
            // console.log(val,price);
            // console.log((val*price)*1);
            $(this).parent("td").next("td").text(((val * price) * 1).toFixed(2));
			
			var id = $(this).parents("tr").attr("data-id")*1;
			console.log(id);
			console.log(val);
            var result = await updateGoods({ id,val });
            console.log(result);
			
            getTotal();
            if (val >= 2) {
                // console.log($(this).prev().prev());
                $(this).prev().prev().text("-");
            } else {
                $(this).prev().prev().text("");
            }
        })

        $(document).on("click", ".reduce",async function () {
            var val = $(this).next().val();
			if (val <= 1) {
                $(this).text("");
                $(this).off("click");
            } else {
                val--;
                $(this).next().val(val);
                var price = $(this).parent("td").prev("td").text();
                $(this).parent("td").next("td").text(((val * price) * 1).toFixed(2));
                getTotal();
            }
			var id = $(this).parents("tr").attr("data-id")*1;
			console.log(id);
			console.log(val);
            var result = await updateGoods({ id,val });
            console.log(result);
            
        })

         $(document).on("click", ".delete",async function () {
            // this -> 执行委托事件的元素(事件源)
            // $(this).parents("tr").remove();
            var id = $(this).parents("tr").attr("data-id");
			console.log(id);
            var result = await deleteShoppingCarById({ id });
            console.log(result);
            var { status } = result;
            if (status) {
                $(this).parents("tr").remove();
            }
            isAllChecked();
            getTotal();
        })

        $(document).on("click", "#deleteAll",async function () {
            // this -> 执行委托事件的元素(事件源)
            // $(".delete").parents("tr").remove();
            var list = $(".check-one:checked").parents("tr").map(function () {
                return $(this).attr("data-id");
            }).get();
            console.log(list);

            var str = list.join(",");
			
			var id = $(this).parents("tr").attr("data-id");
			var result = await deleteShoppingCarById({ id:str });
			console.log(result);
			var { status } = result;
			if (status) {
				$(".check-one:checked").parents("tr").remove();
			}
			
            isAllChecked();
            getTotal();
        })


        // 清除委托的事件
        // $(document).off("click", ".add");

        function getTotal() {
            var sum = 0;
            var allPrice = 0;
            $(".check-one:checked").each(function () {
                var num = $(this).parents("tr").find(".count-input").val() * 1;
                var subTotal = $(this).parents("tr").find(".subtotal").text() * 1;
                sum += num;
                allPrice += subTotal;
            })
            $("#selectedTotal").text(sum);
            $("#priceTotal").text(allPrice.toFixed(2));
        }

        function isAllChecked() {
            if ($(".check-one").length > 0 && $(".check-one:checked").length == $(".check-one").length ? true : false) {
                $(".check-all").prop("checked", true);
            } else {
                $(".check-all").prop("checked", false);
            }
        }
    })
	
	
    function exit() {
        delCookie("lgc");
        location.reload();
    }
</script>

</html>